﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>Ecommerce</title>
    <link rel="shortcut icon" type="image/png" href="favicon.png">
    <link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900%7CRoboto+Condensed:300,400,700" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/plugins/owl-carousel/owl.carousel.min.css">
    <link rel="stylesheet" href="assets/plugins/Magnific-Popup/magnific-popup.css">
    <link rel="stylesheet" href="assets/plugins/animate-css/animate.min.css">
    <link rel="stylesheet" href="assets/plugins/swiper/swiper.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="assets/css/responsive.css">
    <link rel="stylesheet" href="assets/css/custom.css">

    <script src="/front/assets/js/jquery-1.12.4.min.js" charset="UTF-8"></script>
    <link rel="shortcut icon" th:href="@{/favicon.ico}">
    <link rel="stylesheet" th:href="@{/front/assets2/css/iconfont.css}">
    <link rel="stylesheet" th:href="@{/front/assets2/css/global.css}">
    <link rel="stylesheet" th:href="@{/front/assets2/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/front/assets2/css/bootstrap-theme.min.css}">
    <link rel="stylesheet" th:href="@{/front/assets2/css/swiper.min.css}">
    <link rel="stylesheet" th:href="@{/front/assets2/css/styles.css}">
    <script th:src="@{/front/assets2/js/jquery.1.12.4.min.js}" charset="UTF-8"></script>
    <script th:src="@{/front/assets2/js/bootstrap.min.js}" charset="UTF-8"></script>
    <script th:src="@{/front/assets2/js/swiper.min.js}" charset="UTF-8"></script>
    <script th:src="@{/front/assets2/js/global.js}" charset="UTF-8"></script>
    <!-- <script src="/front/assets2/js/jquery.DJMask.2.1.1.js" charset="UTF-8"></script> -->
    <script src="/front/assets2/js/jquery-1.12.4.min.js" charset="UTF-8"></script>
    <style type="text/css">
        .err
        {
            color:red;
            font-weight:bold;
        }
    </style>



</head>
<body>
<!-- 引入头部的部分 -->
<div th:include="/front/header"></div>

<!-- page title -->
<section class="page-title-inner" data-bg-img='assets/img/page-titlebg.png'>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <!-- page title inner -->
                <div class="page-title-wrap">
                    <div class="page-title-heading"><h1 class="h2">我的账户<span>Profile</span></h1></div>
                    <ul class="list-unstyled mb-0">
                        <li><a href="index.html">家</a></li>
                        <li><a href="#">店</a></li>
                        <li class="active"><a href="#">检验</a></li>
                    </ul>
                </div>
                <!-- End of page title inner -->
            </div>
        </div>
    </div>
</section>
<!-- End of page title -->

<!-- logout register wrap -->
<section class="pt-30 pb-100">
    <div class="container">
        <div class="row">
            <div class="col-lg-3">
                <!-- dash board nav-->
                <div class="dashboard-inner">
                    <nav>
                        <ul class="nav-list nav">

                            <li>
                                <a class="dashboard-nav-item active" id="nav-order" data-toggle="tab"  href="#order"><span><img src="assets/img/icons/order.svg" class="svg" alt=""></span>订单</a>
                            </li>
                            <li>
                                <a class="dashboard-nav-item" href="/front/userAddress"><span><img src="assets/img/icons/address.svg" ></span>地址</a>
                            </li>
                            <li>
                                <a class="dashboard-nav-item" id='nav-adetails' data-toggle="tab" href="#adetails"><span><img src="assets/img/icons/account3.svg" class="svg" alt=""></span>账户详细资料</a>
                            </li>

                        </ul>
                    </nav>
                </div>
                <!-- End of dash board nav-->
            </div>
            <div class="col-lg-9">
                <!-- dashboard content -->
                <div class="deshboard-content-wrap">
                    <div class="tab-content dashboad-tab-content">

                        <div class="tab-pane fade" id="order" role="tabpanel" aria-labelledby='nav-order'>
                            <!-- dashboard order -->
                            <div class="dashboard-tab-order">
                                <!-- dashboard order table -->
                                <table class="dashboard-order-table">
                                    <tbody>
                                    <tr>
                                        <th>订单号</th>
                                        <th>日期</th>
                                        <th>状态</th>
                                        <th>总价</th>
                                        <th>操作</th>
                                    </tr>
                                    <tr th:each="sales : ${salesList}"
                                        th:object="${sales}">
                                        <td th:text="*{salesId}">#24567</td>
                                        <td th:text="*{businessDate}">2018年8月20日</td>
                                        <td th:if="*{salesState}==1">待支付</td>
                                        <td th:if="*{salesState}==2">待发货</td>
                                        <td th:if="*{salesState}==3">待收货</td>
                                        <td th:if="*{salesState}==4">已收货</td>
                                        <td th:text="*{salesAmount}"></td>
                                        <td>
                                            <a th:if="*{salesState}==1" th:href="@{/front/editOrderState(salesId=*{salesId})}">进行支付</a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                                <!--End of dashboard order table -->
                            </div>
                            <!-- End of dashboard order -->
                        </div>



                        <div class="tab-pane fade" id="address" role="tabpanel" aria-labelledby='nav-address'>
                            <!-- End of address -->
                        </div>

                        <div class="tab-pane fade" id="adetails" role="tabpanel" aria-labelledby='nav-adetails'>
                            <!-- Account details-->
                            <div class="account-details">
                                <form action="" >

                                    <input type="hidden" name="UserInfoId" id="UserInfoId" th:value="${session.FrontUserinfo.UserInfoId}">


                                    <div class="col-md-6">
                                        <label>昵称：</label>
                                        <input type="text" name="UserInfoName" id="UserInfoName" th:value="${session.FrontUserinfo.UserInfoName}"
                                               class="theme-input-style" placeholder="填上你的昵称" required >
                                    </div>

                                    <div class="col-md-6">
                                        <label>姓名：</label>
                                        <input type="text" name="UserInfoRealName" id="UserInfoRealName" th:value="${session.FrontUserinfo.UserInfoRealName}"
                                               class="theme-input-style" placeholder="姓名" required>
                                    </div>

                                    <div class="col-md-6">
                                        <!--<label>性别：</label>-->
                                        <!--<label><input type="radio" name="UserInfoSex" id="UserInfoSex" th:checked="${session.FrontUserAccount.UserInfoSex=='男'}" value="男">男</label>-->
                                        <!--<label><input type="radio" name="UserInfoSex" id="UserInfoSex"  th:checked="${session.FrontUserAccount.UserInfoSex=='女'}" value="女">女</label>-->

                                        <label>性别：</label>
                                        <label><input type="radio" id="UserInfoSex1"  name="UserInfoSex" value="男" th:checked="${session.FrontUserinfo.UserInfoSex=='男'}"> 男士</label>
                                        <label><input type="radio" id="UserInfoSex2" name="UserInfoSex" value="女" th:checked="${session.FrontUserinfo.UserInfoSex=='女'}"> 女士</label>
                                    </div>



                                    <div class="col-md-6">
                                        <label>生日：</label>
                                        <label><input type="date" class="theme-input-style" name="UserInfoBirthday" id="UserInfoBirthday" th:value="${#dates.format(session.FrontUserinfo.UserInfoBirthday,'yyyy-MM-dd')}" placeholder="请选择您的出生日期"></label>
                                    </div>

                                    <div class="col-md-6">
                                        <label>手机号：</label>
                                        <input type="text" name="UserInfoPhone" id="UserInfoPhone" th:value="${session.FrontUserinfo.UserInfoPhone}"
                                               class="theme-input-style" placeholder="手机号" required>
                                    </div>

                                    <div class="col-md-6">
                                        <label>地址：</label>
                                        <input type="text" name="UserInfoAddress" id="UserInfoAddress" th:value="${session.FrontUserinfo.UserInfoAddress}"
                                               class="theme-input-style" placeholder="地址" required>
                                    </div>

                                    <div class="col-md-6">
                                        <label>邮箱：</label>
                                        <input type="text" name="frontUserEmail" id="frontUserEmail" th:value="${session.FrontUserinfo.frontUserEmail}"
                                               class="theme-input-style" placeholder="邮箱" required>
                                    </div>

                                    <div class="col-md-6">
                                        <label>密码：</label>
                                        <input type="text" name="frontUserPwd" id="frontUserPwd" th:value="${session.FrontUserinfo.frontUserPwd}"
                                               class="theme-input-style" placeholder="密码" required>
                                    </div>

                                    <!--<div class="col-md-6">-->
                                    <!--<label>状态：</label>-->
                                    <!--<input type="text" name="frontUserState" id="frontUserState" th:value="${session.frontUserState.frontUserState}"-->
                                    <!--class="theme-input-style" placeholder="状态" required>-->
                                    <!--</div>-->

                                    <div class="col-md-6">
                                        <input type="button" id="jsEditUserBtn" value="保存">
                                    </div>

                                    <script>
                                        $("#jsEditUserBtn").click(function () {
                                            var UserInfoId=$("#UserInfoId").val();
                                            var UserInfoName=$("#UserInfoName").val();
                                            var UserInfoRealName=$("#UserInfoRealName").val();
                                            var UserInfoSex=$("#UserInfoSex1").val();
                                            var UserInfoSex=$("#UserInfoSex2").val();
                                            var UserInfoBirthday=$("#UserInfoBirthday").val();
                                            var UserInfoPhone=$("#UserInfoPhone").val();
                                            var UserInfoAddress=$("#UserInfoAddress").val();
                                            var frontUserEmail=$("#frontUserEmail").val();
                                            var frontUserPwd=$("#frontUserPwd").val();
                                            // var frontUserState=$("#frontUserState").val();


                                            $.ajax({
                                                url:"/front/myaccount_update",
                                                type:"post",
                                                data:{"UserInfoId":UserInfoId,"UserInfoName":UserInfoName,"UserInfoRealName":UserInfoRealName,"UserInfoSex":UserInfoSex,"UserInfoBirthday":UserInfoBirthday,
                                                    "UserInfoPhone":UserInfoPhone,"UserInfoAddress":UserInfoAddress,"frontUserEmail":frontUserEmail,"frontUserPwd":frontUserPwd,},

                                                success:function (data) {
                                                    alert("保存成功");
                                                }
                                            });
                                        })
                                    </script>




                                </form>
                            </div>
                            <!-- End of Account details -->
                        </div>
                    </div>
                </div>
                <!-- End of dashboard content -->
            </div>
        </div>
    </div>
</section>
<!-- End of logout register wrap -->

<!-- footer area -->
<!-- 引入页面尾部的部分 -->
<div th:include="/front/footer"></div>
<!-- End of footer area -->

<!-- back to top -->
<div class="back-to-top">
    <a href="#">
        <div class="back-toop-tooltip"><span>返回顶部</span></div>
        <div class="top-array"></div>
        <div class="top-line"></div>
    </a>
</div>
<!-- back to top -->

<!-- Modal quick view-->
<div class="modal-quickview-container">
    <div class="quick-view-content-wrap">
        <div class="modal-window-overlay"></div>
        <div class="quick-view-content">
            <div class="modal-window-close">
                <img src="assets/img/icons/close-button.svg" class="svg" alt="">
            </div>
            <div class="quick-view-content-inner">
                <div class="row align-items-center">
                    <div class="col-lg-7">
                        <!-- Start shop product slider -->
                        <div class="shop-product-slider-wrap">
                            <!-- Start shop slider top side -->
                            <div class="swiper-container quick-product-gallery">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <img class='' src="assets/img/shop/quick-view1.png" alt="" data-rjs="2" />
                                    </div>
                                    <div class="swiper-slide">
                                        <img class='' src="assets/img/shop/quick-view2.png"  alt="" data-rjs="2" />
                                    </div>
                                    <div class="swiper-slide">
                                        <img class='' src="assets/img/shop/quick-view3.png" alt="" data-rjs="2" />
                                    </div>
                                    <div class="swiper-slide">
                                        <img class='' src="assets/img/shop/quick-view4.png" alt="" data-rjs="2" />
                                    </div>
                                </div>
                            </div>
                            <!-- End of shop slider top side -->

                            <!-- Start shop slider bottom side -->
                            <div class="swiper-container quick-product-thumbs">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <img src="assets/img/shop/details-nav1.png" data-rjs="2" alt="">
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="assets/img/shop/details-nav3.png" data-rjs="2" alt="">
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="assets/img/shop/details-nav4.png" data-rjs="2" alt="">
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="assets/img/shop/details-nav5.png" data-rjs="2" alt="">
                                    </div>
                                </div>
                            </div>
                            <!-- End of shop slider bottom side -->
                        </div>
                        <!-- End of shop product slider -->
                    </div>

                    <div class="col-lg-5">
                        <!-- product details inner -->
                        <div class="product-details-inner">
                            <!-- product info -->
                            <div class="product-info">
                                <div class="product-rating">
                                    <div class="star-rating">
                                        <span></span>
                                    </div>
                                </div>

                                <!-- product title -->
                                <div class="product-title">
                                    <h2><a href="shop-details.html">梭织抱枕</a></h2>
                                </div>
                                <!-- end of product title -->

                                <div class="product-price"><h3 class="new-price">$25</h3><h5 class="old-price">$30.1</h5></div>

                                <div class="product-description">
                                    <p>Ladyship it daughter securing procured or am moreover mr Put sir she exercise vicinity cheerful wondered</p>
                                </div>

                                <!-- list product group -->
                                <div class="list-product-group">
                                    <ul class="mb-0 list-unstyled">
                                        <li class="size-group group">
                                            <span class="list-heading">尺寸:</span>
                                            <ul class="size-list mb-0 list-unstyled">
                                                <li><a href="#" class="product-size"><span>L</span></a></li>
                                                <li><a href="#" class="active product-size"><span>M</span></a></li>
                                                <li><a href="#" class="product-size"><span>S</span></a></li>
                                            </ul>
                                        </li>
                                        <li class="quantity-group group">
                                            <span class="list-heading">数量:</span>
                                            <div class="product-quantity">
                                                <span class="minus"><img src="assets/img/icons/minus.svg" class="svg" alt=""></span>
                                                <input type="text" value="0" class="product-quantity-list product-size">
                                                <span class="plus"><img src="assets/img/icons/plus.svg" class="svg" alt=""></span>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <!-- End of list product group -->

                                <!-- product details btns -->
                                <div class="product-details-btns">
                                    <div class="addto-bag-btn">
                                        <a href="#" class="btn btn-fill-type">
                                            <span><img src="assets/img/icons/add-bag.svg" alt="" class="svg"></span><span class="d-none d-lg-block mr-0">添加购物车</span>
                                        </a>
                                    </div>
                                    <div class="wish-btn">
                                        <a href="#" class="btn btn-fill-type">
                                            <span class=""><img src="assets/img/icons/wishlist.svg" alt="" class="svg"></span><span class="d-none d-lg-block mr-0"></span>
                                        </a>
                                    </div>
                                    <div class="compare-btn">
                                        <a href="#" class="btn btn-fill-type">
                                            <span><img src="assets/img/icons/compare.svg" alt="" class="svg"></span>
                                        </a>
                                    </div>
                                </div>
                                <!-- product details btns -->

                                <!-- more detailes -->
                                <div class="more-details-button">
                                    <a href="shop-details.html" class="btn btn-line roboto">加到收藏夹</a>
                                </div>
                                <!-- End of more detailes -->

                                <!-- product mata -->
                                <div class="product_meta item-product-meta-info">
                                            <span class="sku_wrapper">
                                                <label>
                                                    SKU:
                                                    <span>N/A</span>
                                                </label>
                                            </span>
                                    <span class="posted_in">
                                                <span class="meta-item-list">
                                                    <a href="#">配饰</a>,
                                                    <a href="#">时尚</a>,
                                                    <a href="#">夏季</a>
                                                </span>
                                            </span>
                                </div>
                                <!-- End of product mata -->
                            </div>
                            <!-- End of product info -->
                        </div>
                        <!-- End of product details inner -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!--End of Modal quick view-->

<!-- add add to cart notifacition -->
<div class="modal-add-notifacition">
    <div class="add-notifacition-inner media align-items-center">
        <div class="add-noti-image">
            <img src="assets/img/product/add-note.jpg" alt="">
        </div>
        <div class="add-noti-text media-body">
            <span>Cat Eye Reading Glasses</span>
            <p>Added To Your Cart Successfully!</p>
        </div>
    </div>
</div>
<!-- add add to cart notifacition -->

<!-- add add to cart notifacition -->
<div class="modal-wish-notifacition">
    <div class="wish-notifacition-inner media align-items-center">
        <div class="wish-noti-image">
            <img src="assets/img/product/add-note.jpg" alt="">
        </div>
        <div class="wish-noti-text media-body">
            <span>Cat Eye Reading Glasses</span>
            <p>Added To Your Wish Successfully!</p>
        </div>
    </div>
</div>
<!-- add add to cart notifacition -->

<!-- JS Files -->
<!-- ==== JQuery 3.3.1 js file==== -->
<script src="assets/js/jquery-3.3.1.min.js"></script>
<script src="assets/js/bootstrap.bundle.min.js"></script>
<script src="assets/plugins/waypoints/jquery.waypoints.min.js"></script>
<script src="assets/plugins/parsley/parsley.min.js"></script>
<script src="assets/plugins/retinajs/retina.min.js"></script>
<script src="assets/plugins/parallax/parallax.js"></script>
<script src="assets/plugins/parallax/parallaxh.min.js"></script>
<script src="assets/plugins/owl-carousel/owl.carousel.min.js"></script>
<script src="assets/plugins/Magnific-Popup/jquery.magnific-popup.min.js"></script>
<script src="assets/plugins/waypoints/jquery.counterup.min.js"></script>
<script src="assets/plugins/isotope/packery.pkgd.min.js"></script>
<script src="assets/plugins/swiper/swiper.min.js"></script>
<script src="assets/plugins/countdown/jquery.countdown.min.js"></script>
<script src="assets/plugins/Magnific-Popup/jquery.elevateZoom-3.0.8.min.js"></script>
<script src="assets/plugins/tweenmax/TweenMax.min.js"></script>
<script src="assets/plugins/text-animation/anime.min.js"></script>
<script src="http://ditu.google.cn/maps/api/js?key=AIzaSyB2D8wrWMY3XZnuHO6C31uq90JiuaFzGws"></script>
<script src="assets/js/scripts.js"></script>
<script src="assets/js/custom.js"></script>
</body>
</html>